import { modalConfig } from "@/views/trade/withdraw/components/tradeAvatar/modal";
import { toTimeStamp } from "@userList/utils";
import { sexColorOptions, sexIconOptions } from "./store";
export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => ({
        nickname: null, // 昵称
        avatar: null, // 头像
        uid: null, // 世界id
        sex: null, // 性别
      }),
    },
    nicknameTextColor: {
      // 昵称文字颜色
      type: String,
      default: "#0052D9",
    },
    isShowSexIcon: {
      // 是否显示性别图标
      type: Boolean,
      default: true,
    },
  },
  setup(props, { attrs, emit, expose, slots }) {
    const loading = ref(false);
    const defineModal = modalConfig();
    const { title: modalTitle, formState: modalFrom } = defineModal;
    const showModal = () => {
      defineModal.visible.value = true;
    };
    const fetchMemberInfo = async (userId: any) => {
      try {
        loading.value = true;
        const res: any = await userApi.queryDataById({
          userId,
        });
        if (res.code != 200) return message.error(res.message);
        const { data = {} } = res;
        const { dynamics, systemIds, tag_ids, ...form } = data;
        form.dynamics = data?.dynamics?.length
          ? data?.dynamics.map((item: any) => {
              if (!isEmptyType(item.created_at)) {
                item.created_at = toTimeStamp(item.created_at);
              }
              return item;
            })
          : [];
        form.systemIds =
          data?.systemTags?.map((item: any) => item.tag_id) ?? [];
        form.tag_ids = data?.accountTag?.map((item: any) => item.tag_id) ?? [];
        return form;
      } catch (error: any) {
        message.error(error.message);
      } finally {
        loading.value = false;
      }
    };
    const handleAvatarClick = async () => {
      try {
        modalTitle.value = $t("base.userDetail");
        const record = await fetchMemberInfo(props.data.uid);
        Object.keys(modalFrom).forEach((key: any) => {
          modalFrom[key] = record[key] ?? modalFrom[key];
        });
        showModal();
      } catch (error: any) {
        message.error(error.message);
      } finally {
      }
    };
    return () => (
      <>
        <a-spin spinning={loading.value}>
          <div
            {...attrs}
            style="display: flex;align-items: center;cursor: pointer;"
            onClick={handleAvatarClick}
          >
            <a-avatar src={props.data.avatar} size="30" style="flex: none">
              <user-outlined />
            </a-avatar>
            <div style="display: grid;flex: 1;text-align: left;">
              <div style="display: flex;justify-content: space-between;align-items: center;color: #1296DB;">
                <span
                  style={`color: ${props.nicknameTextColor};margin-right: 20px;`}
                >
                  {props.data.nickname}
                </span>
                {props.isShowSexIcon
                  ? renderIcon(
                      sexIconOptions[props.data.sex],
                      null,
                      `color: ${sexColorOptions[props.data.sex]}`
                    )
                  : null}
              </div>
              <div>
                {$t("withdraw3") + "ID"}: {props.data.uid}
              </div>
            </div>
          </div>
          <s-design defineModal={defineModal} />
        </a-spin>
      </>
    );
  },
});
